<template>
  <!-- 未登录页面 -->
  <div id="myself1">
    <!-- 头部 -->
    <div class="mys-back">
      <div class="user-head">
        <div class="user-head-1">
          <a href class="ico1-dog"></a>
          <span class="user-lg">
              <span class="user-lg1">
                  jd_7b0807300d1d3
                  <span></span>
              </span><br>
              <span class="user-lg2">
                  <a href="">1760****515</a>
                  <a href="" class="ed"></a>
              </span>
          </span>
        </div>
        <div class="user-head-2">
          <a href>
            <i></i>
          </a>
          <a href>
            <i></i>
          </a>
        </div>
        <div class="vip">
            <a href=""></a>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="mys-back2">
      <div class="user-wallet">
        <ul>
          <li class="li1">
            <a href>
              <i></i>
              <span>我的钱包</span>
              <b></b>
            </a>
            <span></span>
          </li>
          <li class="li2">
            <a href>
              <i>0</i>
              <span>红包</span>
            </a>
          </li>
          <li>
            <a href>
              <i>0</i>
              <span>优惠券</span>
            </a>
          </li>
          <li>
            <a href>
              <i>0</i>
              <span>白条</span>
            </a>
          </li>
          <li>
            <a href>
              <i>0</i>
              <span>鲜豆</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 第三行 -->
    <div class="pic-third">
      <a href>
        <img src="../image/myself/6c8adc25a2447f6c.png" alt>
      </a>
    </div>
    <!-- 第四行 -->
    <div class="mys-back3">
      <div class="function-ins">
        <a href>
          <img src="../image/myself/59f861f1Naec07388.png" alt>
          <span>我的关注</span>
        </a>
        <a href>
          <img src="../image/myself/59f861f4Nb4f14ccb.png" alt>
          <span>我的评价</span>
        </a>
        <a href>
          <img src="../image/myself/59f86219Na63aa49b.png" alt>
          <span>我的地址</span>
        </a>
        <a href>
          <img src="../image/myself/5aa11240Ne9946bfd.png" alt>
          <span>会员减运费</span>
        </a>
        <a href>
          <img src="../image/myself/5a4b618cN592138dc.png" alt>
          <span>签到有惊喜</span>
        </a>
        <a href>
          <img src="../image/myself/59f86201Nbb2b1e3a.png" alt>
          <span>退款/售后</span>
        </a>
        <a href>
          <img src="../image/myself/59f8622cNa78b328b.png" alt>
          <span>客服反馈</span>
        </a>
        <a href>
          <img src="../image/myself/59f8623aN0de96396.png" alt>
          <span>帮助中心</span>
        </a>
         <a href class="ins">
          <img src="../image/myself/5b225111Nce6fb324.png" alt>
          <span>配送员注册</span>
          <b></b>
        </a>
         <a href class="ins">
          <img src="../image/myself/59f86273N0c5a763c.png" alt>
          <span>关于我们</span>
        </a>
         <a href class="ins">
          <img src="../image/myself/5c05f767N9ba4149a.png" alt>
          <span>岁末狂欢</span>
          <b></b>
        </a>
      </div>
    </div>
    <!-- 第五行 -->
    <div class="exit">
        <span @click="$router.push({name:'login'})">退出账号</span>
    </div>
     <Appfooter active='my'></Appfooter>
  </div>
</template>
<script>
export default {};
</script>
<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  font-style: normal;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
#myself1 {
  background-color: #f2f2f2;
  width: 750px;
  height:1300px;
  .mys-back {
    position: relative;
    background: #fff;
    z-index: 1;
    .user-head {
      width: 750px;
      height: 230px;
      //border: 1px solid red;
      background: url("../image/myself/my_bgnew.png");
      background-size: cover;
      position: relative;
      .user-head-1 {
        height: 180px;
        //border: 1px solid red;
        padding-top: 48px;
        position: relative;
        .ico1-dog {
          background: url(../image/myself/bg_head_new_light.png) no-repeat;
          background-size: auto 122px;
          display: inline-block;
          width: 122px;
          height: 122px;
          //border: 1px solid red;
          margin-left: 32px;
        }
        .user-lg {
          display: inline-block;
          padding: 12px 12px 16px 12px;
          height: 32px;
          line-height: 32px;
          color: #fff;
          font-size: 24px;
          position: absolute;
          left: 180px;
          top: 80px;
          cursor: pointer;
          .user-lg1{
              font-size:24px;
              span{
                  display: inline-block;
                  width: 28px;
                  height: 23px;
                  background: url(../image/myself/vip_icon_gray.png) center no-repeat;
                  background-size:27px 22px;}
          }
          .user-lg2{
              padding-top:10px;
              display: block;
              a{color: #fff;
                font-size:30px;}
              .ed{
                  display: inline-block;
                  width: 28px;
                  height: 28px;
                  background:url(../image/myself/icon_edit.png) no-repeat;
                  background-size:28px 28px;
              }
          }
        }
      }
      .user-head-2 {
        width: 750px;
        height: 100px;
        //border: 1px solid red;
        position: absolute;
        top: 0px;
        a {
          display: inline-block;
        }
        a:nth-of-type(2) {
          padding: 40px 0px 40px 40px;
          float: right;
          i {
            width: 44px;
            height: 44px;
            display: inline-block;
            background: url(../image/myself/icon_er.png) center no-repeat;
            background-size:44px 44px;
          }
        }
        a:nth-of-type(1) {
          padding: 40px 20px 40px 40px;
          float: right;
          i {
            width: 44px;
            height: 44px;
            display: inline-block;
            background: url(../image/myself/user_message_icon.png) center no-repeat;
             background-size:44px 44px;
          }
        }
      }
      .vip{
          a{
              display: block;
              width:204px;
              height:130px;
              background: url(../image/myself/icon_vip_card_new.png) center no-repeat;
              background-size:203px 123px;
              position: absolute;
              right:0;
              top:107px;
          }
      }
    }
  }
  //第二行
  .mys-back2 {
    position: relative;
    background: #fff;
    .user-wallet {
      width: 720px;
      height: 140px;
      padding-left: 30px;
      margin-bottom: 20px;
      //border: 1px solid red;
      a {
        display: inline-block;
        color: #3c3c3c;
        font-size: 20px;
        text-align: center;
      }
      i {
        display: block;
        height: 50px;
        line-height: 50px;
        width: 50px;
        margin: 0px auto;
        font-size: 30px;
      }
      ul {
        width: 750px;
        padding: 40px 0px 24px 0px;
        position: absolute;
        left: 0px;
        display: flex;

        li {
          display: block;
          width: 20%;
          span {
            display: inline-block;
            width: 150px;
            text-align: center;
            font-size: 26px;
            //border:1px solid red;
          }
        }
        .li1 {
          width: 20%;
          height: 100px;
          a {
            padding-left: 30px;
            background: url(../image/myself/packet-right-border@2x.png)
              no-repeat;
            background-size: 10px 73px;
            background-position: 170px 0px;
            i {
              background: url(../image/myself/icon_packet.png) no-repeat;
              background-size: 50px 50px;
            }
          }
        }
      }
    }
  }
  //第三行
  .pic-third {
    img {
      width: 750px;
      height: 150px;
    }
  }
  //第四行
  .mys-back3 {
    width: 750px;
    background: #fff;
    position: relative;
    .function-ins {
      width: 100%;
      height: 460px;

      a {
        display: block;
        width: 25%;
        float: left;
        border-bottom: 1px solid #e8e8e8;
        
        img {
          display: block;
          width: 88px;
          height: 88px;
          margin: 0 auto;
        }
        span {
          display: block;
          width: 100%;
          text-align: center;
          color: #333;
          font-size: 30px;
          padding: 5px 0 25px 0;
        }
       
      }
      .ins{border-bottom: none;
        position: relative;
       b{
          display: block;
          width: 4px;
          height: 4px;
          border:2px solid #ff5757;
          border-radius: 4px;
          background-color:  #ff5757;
          position: absolute;
          top:40px;
          right:34%;
        }

      }
    }
  }
  //第五行退出账号
  .exit{
      margin-top:20px;
      span{display: block;
       width: 100%;
       text-align: center;
       height:92px;
       line-height: 92px;
       font-size:30px;
       color: #ff5757;
       background-color:#fff;}
  }
}

</style>